<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="120px">

    <div class="survey_view">
      <el-collapse>
        <el-collapse-item title="地质特征">
          <el-row>
            <el-col :span="12">
              <el-form-item label="地形地貌" prop="landform">
                <el-input v-model="currentRow.landform" type="textarea" :rows="4" clearable placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="地质构造" prop="construction">
                <el-input v-model="currentRow.construction" type="textarea" :rows="4" clearable
                          placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地层岩性" prop="lithology">
                <el-input v-model="currentRow.lithology" type="textarea" :rows="4" clearable placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="地下水发育情况" prop="groundwaterDetail">
                <el-input v-model="currentRow.groundwaterDetail" type="textarea" :rows="4" clearable
                          placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="边坡稳定性评价">
          <div class="zhihu_view">
            <el-form-item prop="stability">
              <el-input v-model="currentRow.stability" type="textarea" :rows="5" clearable placeholder=""></el-input>
            </el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item title="边坡支护措施">
          <div class="zhihu_view">
            <el-form-item>
              <el-checkbox-group v-model="currentRow.protectionTypeList">
                <el-checkbox v-for="item in EnumProtectionTypeList" :key="item.code" :label="item.code">{{item.name}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>

          <div class="geology-children">
            支护信息
            <el-button size="mini" type="primary" @click="addProtectionDetail" icon="el-icon-circle-plus-outline">添加
            </el-button>
          </div>
          <div class="add-tab">
            <el-table border :data="currentRow.protectionDetailList" class="m-t-24">
              <el-table-column label="级数">
                <template slot-scope="scope">
                  <el-form-item :prop="`protectionDetailList.${scope.$index}.level`">
                    <el-input v-model="scope.row.level" type="number" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="坡率">
                <template slot-scope="scope">
                  <el-form-item :prop="`protectionDetailList.${scope.$index}.gradient`">
                    <el-input v-model="scope.row.gradient" placeholder="请输入" :maxlength="20"
                              style="width:100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="支护措施">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.dept" clearable placeholder="请选择">
                    <el-option
                      v-for="item in protectionList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规格尺寸">
                <template slot-scope="scope">
                  <el-form-item :prop="`protectionDetailList.${scope.$index}.size`">
                    <el-input v-model="scope.row.size" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <el-form-item :prop="`protectionDetailList.${scope.$index}.count`">
                    <el-input v-model="scope.row.count" type="number" placeholder="请输入" :maxlength="20"
                              style="width:100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="备注">
                <template slot-scope="scope">
                  <el-form-item :prop="`protectionDetailList.${scope.$index}.remark`">
                    <el-input v-model="scope.row.remark" placeholder="请输入" :maxlength="20"
                              style="width:100%"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="90">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDeleteProtectionDetail(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="排水措施">
          <el-form-item label="地表排水措施">
            <el-checkbox-group v-model="currentRow.waterDrainStepList" @change="ChangeOtherWater">
              <el-checkbox v-for="item in EnumWaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="描述" v-if="otherWater || currentRow.waterDrainStepRemark">
            <el-input v-model="currentRow.waterDrainStepRemark"
                      placeholder="请描述其他 地表排水措施"></el-input>
          </el-form-item>
          <el-form-item label="地下排水措施">
            <el-checkbox-group v-model="currentRow.groundwaterDrainStepList" @change="ChangeOtherGroundWater">
              <el-checkbox v-for="item in EnumGroundwaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="描述" v-if="otherGroundWater || currentRow.groundwaterDrainStepRemark">
            <el-input v-model="currentRow.groundwaterDrainStepRemark"
                      placeholder="请描述其他 地下排水措施"></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="geology">
      pdf勘察设计文件
    </div>
    <div v-if="isLook">
      <div v-for="(item,index) in prospectionFile" :key="index"
           style="text-align: center;display: inline-block;margin-left: 20px;font-size: 20px">
        <a :download="item.name" :href="item.url" style="color:black">
          <i class="iconfont iconPDF" style="font-size: 70px;color:red"></i>
          <br/>
          {{item.name}}
        </a>
      </div>
    </div>
    <upload-file v-model="currentRow.prospectionFileList" ref="uploadClear" v-else></upload-file>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import UploadFile from '@/components/upload-file'
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  components: {UploadFile},
  data() {
    return {
      EnumStructureList: [],
      EnumProtectionTypeList: [],
      EnumWaterDrainStepList: [],
      EnumGroundwaterDrainStepList: [],
    }
  },
  computed: {
    protectionList(){
      let protectionList = []
      this.currentRow.protectionTypeList.map(x => {
        this.EnumProtectionTypeList.map(y => {
          if (x === y.code) {
            protectionList.push(y)
          }
        })
      })
      return  protectionList
    },
    prospectionFile(){
      return this.filePathHandle(this.currentRow.prospectionFileList)
    },
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {  //选择路线
    changeProtection() {

    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    //如果是查看详情，把文件地址处理
    if (this.isLook) {
      this.filePathHandle(this.currentRow.prospectionFileList)
    }
    this.queryDictList(['EnumStructure', 'EnumProtectionType','EnumWaterDrainStep','EnumGroundwaterDrainStep'],
      ['EnumStructureList', 'EnumProtectionTypeList','EnumWaterDrainStepList','EnumGroundwaterDrainStepList']);
  },

}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }


  .survey_view .el-collapse-item__header {
    font-size: 16px;
    border-bottom: 1px solid #d6d6d6;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 30px;
    color: #fff;
    font-weight: 600;
    background-color: #1990FE;
    border-radius: 10px;
  }

  .zhihu_view .el-form-item__content {
    margin-left: 30px !important;
  }
</style>
